<template>
  <view class="search">
    <!-- 栏目搜索框  action-style	右侧控件的样式，对象形式-->
    <!-- <u-search
      placeholder="请输入商品名"
      :show-action="true"
      :action-style="{
        background: '#0a0',
        padding: '15rpx',
        marginTop: '15rpx',
      }"

    ></u-search> -->
    <!-- 这里用v-model双向绑定也可以实现。但是不用v-model更切合实际业务需求 -->
    <u-search placeholder="请输入商品名" @input="handlerInput"></u-search>
      <!-- 渲染总数据 -->
        <navigator
        class="goods-item u-flex u-flex-margin-bottom-10"
        v-for="item in searchGoods"
        :key="item.goods_id"
        :url="'/pages/goods_detail/goods_detail?id=' + item.goods_id"
      >
        <!-- 进行左边图片的渲染 -->
        <view class="goods_img u-flex-1">
          <u-image
            width="80%"
            :src="item.goods_small_logo"
            mode="widthFix"
          ></u-image>
        </view>
        <!-- 进行右边标题和价格的渲染 -->
        <view class="goods_info u-flex-2">
          <view class="goods_name u-line-2">{{ item.goods_name }}</view>
          <!-- 价格 -->
          <view class="goods_price"> ￥{{ item.goods_price }} </view>
        </view>
      </navigator>
  </view>
</template>

<script>
let timeid;
export default {
  data() {
    return {
      inp: "",
      searchGoods:""
    };
  },
  methods: {
    async handlerInput(inp) {
      if (timeid) {
        clearTimeout(timeid);
      }
      //  1 获取输入框的值 inp
      // 2 发送请求 /goods/search
      timeid = setTimeout(async () => {
        const res = await this.$u.get("/goods/search", {
          // 否	string	关键字
          query: inp,
          // 否	string	分类id
          cid: "",
          // 否	number	页码
          pagenum: 1,
          // 否	number	页容量
          pagesize: 10,
        });
        console.log(res);
        this.searchGoods = res.message.goods
        console.log(70,this.searchGoods)
      }, 2000);
    },
  },
};
</script>

<style>
</style>